<html xmlns:th="http://www.thymeleaf.org">

<!-- js+css -->
<div th:fragment="source">
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/css/style.css"/>
    <link rel="shortcuticon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}">
    <script>
        $(document).ready(function () {
            // 在这里写你的代码...
        });
    </script>
</div>

<!-- 头文件 -->
<div th:fragment="header">
    <!-- top -->
    <div class="soubg">
        <div class="sou">
    	<span class="s_city_b">
        </span>
            <span class="fr">
            <span class="fl" th:if="${session.user} == null">你好，请<a href="/login" style="color:#ff4e00;">登录</a>&nbsp;
                <a href="/register" style="color:#ff4e00;">免费注册</a>&nbsp;&nbsp;</span>
            <span class="fl" th:if="${session.user} != null"><a
                    href="/userInfo">[[ ${session.user.userName} ]]</a>&nbsp;|&nbsp;<a
                    href="/orderList">我的订单</a>&nbsp;</span>
            <span class="fl" th:if="${session.user}!= null">|&nbsp;<a href="/user/logout">注销</a></span>

        </span>
        </div>
    </div>
    <div id="fade1" class="black_overlay"></div>
    <div id="MyDiv1" class="white_content">
        <div class="white_d">
            <div class="notice_t">
                <span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv_1('MyDiv1','fade1')"><img
                        src="/images/close.gif"/></span>
            </div>
            <div class="notice_c">
                <table border="0" align="center" cellspacing="0" cellpadding="0">
                    <tr valign="top">
                        <td width="40"><img src="/images/suc.png"></td>
                        <td>
                            <span style="color:#3e3e3e; font-size:18px; font-weight:bold;"
                                  id="showMessage">操作成功</span><br/>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <!-- top -->

    <!-- search -->
    <div class="top">
        <div class="logo">
            <a href="/"><img src="/images/logo.png" style="width: 230px;border:0px solid red;"></a>
        </div>
        <div class="search">
            <form action="/product/searchProduct" method="post">
                <input type="text" name="productName" class="s_ipt">
                <input type="submit" value="搜索" class="s_btn">
            </form>
        </div>
        <div th:if="${session.user} eq null"></div>
        <div class="i_car" th:if="${session.user} ne null">
            <a href="/cart/findAllCart">
                <div class="car_t">
                    购物车 [
                    <span th:text="${cartList.size()}"></span>
                    ]
                </div>
            </a>
            <div class="car_bg">
                <div class="un_login">我的购物车</div>
                <ul class="cars">
                    <li th:each="cart:${cartList}">
                        <div class="img"><a th:href="'/product/productOne/'+${cart.productId}"><img
                                th:src="'/images/'+${cart.fileName}"
                                width="58"
                                height="58"/></a></div>
                        <div class="name"><a th:href="'/product/productOne/'+${cart.productId}"
                                             th:text="${cart.name}"></a></div>
                        <div class="price"><font color="#ff4e00">￥[[${cart.price}]]</font>
                            X <span class="quantity">[[${cart.quantity}]]</span>
                            = <span class="cost">[[${cart.cost}]]</span></div>
                    </li>
                </ul>
                <div class="price_sum">共计&nbsp;<font color="#ff4e00">￥</font><span id="totalCost"></span></div>
                <div class="price_a"><a href="/cart/findAllCart">去结算</a></div>
            </div>
        </div>
    </div>
    <!-- search -->

    <script type="text/javascript">
        $(function () {
            //购物车总价
            var array = $(".cost");
            var totalCost = 0;
            for (var i = 0; i < array.length; i++) {
                var val = parseInt($(".cost").eq(i).html());
                totalCost += val;
            }
            $("#totalCost").html("￥" + totalCost);

        });

        function getProduct(obj) {
            let index = $(".product").index(obj);
            let id = parseInt($(".id").eq(index).val());
            window.location.href = "/product/productList/one/" + id;
        }

    </script>
</div>

<!-- 商品类目 -->
<div th:fragment="category">
    <div class="menu_bg">
        <div class="menu">
            <div class="nav">
                <div class="nav_t">全部商品分类</div>
                <div class="leftNav">
                    <ul>
                        <li th:each="leveOne:${list}">
                            <div class="fj">
                                <input class="id" type="hidden" th:value="${leveOne.id}">
                                <span class="n_img"></span>
                                <span class="fl product" th:text="${leveOne.name}" onclick="getProduct(this)"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="menu_r">
                <li><a href="/">首页</a></li>
                <li th:each="productCategory:${list}">
                    <a th:href="'/product/productList/one/'+${productCategory.id}">[[ ${productCategory.name} ]]</a>
                </li>
                <li><a href="/product/integralProductList">积分商品</a></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            //商品类目
            $(".leftNav ul li").hover(
                function () {
                    $(this).find(".fj").addClass("nuw");
                    $(this).find(".zj").show();
                }
                ,
                function () {
                    $(this).find(".fj").removeClass("nuw");
                    $(this).find(".zj").hide();
                }
            )
        });
    </script>
</div>

<!-- 底部 -->
<div th:fragment="footer">
    <div class="b_btm_bg b_btm_c" id="footer">
        <div class="b_btm">
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="/images/b1.png" width="62" height="62"/></td>
                    <td><h2>正品保障</h2>正品行货 放心购买</td>
                </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="/images/b2.png" width="62" height="62"/></td>
                    <td><h2>满38包邮</h2>满38包邮 免运费</td>
                </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="/images/b3.png" width="62" height="62"/></td>
                    <td><h2>天天低价</h2>天天低价 畅选无忧</td>
                </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="/images/b4.png" width="62" height="62"/></td>
                    <td><h2>准时送达</h2>收货时间由你做主</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div th:fragment="permit">
    <div class="btmbg">
        <div class="btm">
            Copyright © 2021-2021 秦海 All Rights Reserved.
            <br/>
            <img src="/images/b_1.gif" width="98" height="33"/><img src="/images/b_2.gif" width="98" height="33"/><img
                src="/images/b_3.gif" width="98" height="33"/><img src="/images/b_4.gif" width="98" height="33"/><img
                src="/images/b_5.gif" width="98" height="33"/><img src="/images/b_6.gif" width="98" height="33"/>
        </div>
    </div>
</div>